<!doctype html>
<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>A propos</title>

    <meta name="description" content="a propos du shi fu mi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="style.css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold" rel="stylesheet" /> <!-- Load Droid Serif from Google Fonts -->
    <link rel="icon" type="image/png" href="images/favicon.png"/> 

</head>

<body>

    <div id="wrapper">

        <header id="header" class="clearfix" role="banner">

            <hgroup>
                <h1 id="site-title"><a href="index.html">Shi Fu Mi</a></h1>
                <h2 id="site-description">Pierre feuille ciseaux en français</h2>
            </hgroup>
        </header> 

        <div id="main" class="clearfix">

            <nav id="menu" class="clearfix" role="navigation">
                <ul> 
                    <li><a href="index.html">Accueil</a></li>
                    <li class="current"><a href="about.html">A propos</a></li>
                    <li><a href="credits.html">Crédits</a></li>
                </ul>
            </nav>
            <!--[if lte IE 7]>
                <div class="ie"></div>
            <![endif]-->

            <div id="content" role="main">

                <article class="post">


                    <h1>Description du projet</h1>
                    <figure class="alignleft">
                        <a href="#"><img src="images/shifumi.png" alt="Shi Fu Mi" class="thumbnail" /></a>
                    </figure>
                    <div class="entry-content">
                        <hr />
                        <h2>Pourquoi?</h2>
                        <p>
                            Ce projet a été créé dans le but de tester et évaluer notre apprentissage de HTML5, CSS3, Jquery. Il s'agit d'un projet scolaire réalisé dans le cadre du M1 WIC sous la tutelle de Jacques Bandet.</p>
                        <p>La réalisation de ce projet est assez simple, elle met cependant en oeuvre toutes nos connaissances dans le domaines. Nous avons donc choisi d'appueyer particulièrement le HTML5 et CSS3 dans ce projet.</p>
                        </p>

                        <hr />

                        <h2>Comment ...</h2>
                        <p>
                        <ul>
                            <li>HTML5
                                <p>
                                    Permet de gérer les sections, des aside. Nous avons également utilisé les rôles et bien mis en valeur la sémantique de nos balises (figure, header, footer, nav...)
                                </p>
                            </li>
                            <li>CSS3
                                <p>
                                    Utilisé quasiment de partout, nous avons beaucoup joué avec les effets que propose CSS3 quitte à malmené d'anciennes version de navigateur. Cependant nous avons essayer d'integrer un maximum de propriétés spécifiques (webkit, moz ...) et un message d'avertissement pour les utilisateur IE7.
                                    <br/> Sur le titre par exemple il y a un agrandissement au passage de la souris.
                                    <br/> De même que sur les thumbnails des pages "A propos" et "Crédits" on peut observer un légère rotation au passage de la souris
                                    <br/> Sur les boutons, et parfois sur les figures, on a des border radius, des ombres ou des dégradés par exemple.

                                </p>
                            </li>
                            <li>JQuery
                                <p>
                                    Cette librairie est utilisée tout au long du jeu et permet de gérer les intéractions avec le client. L'accès aux élèments est une des particuliraté les plus agréables de cette bibliothèque comparée à l'utilisation d'un JavaScript pur.
                                    <br/>Pour la requête ajax seules cinq lignes sont nécessaires...<br/>
                                    <code>function choixServeur(){<br/>
                                        &nbsp;return $.ajax({<br/>
                                        &nbsp;url: "serveur.php",<br/>
                                        &nbsp;async: false<br/>
                                        &nbsp;}).responseText;<br/>
                                        }</code>
                                    <br/>Alors comme ils le disent si bien : "write less do more"
                                </p>
                                <p>
                                    Le jeu gère l'affichage via JQuery, en ajoutant des images ou en mettant à jour le tableau
                                </p>
                                <p>
                                    Le timer de trois secondes nous a un peu posé problème mais nous avons souhaité le conservé et il fonctionne très bien désormais. 
                                </p>
                                <ul>
                                    <li>JQuery UI
                                        <p>Cet outil permet d'afficher la fenêtre modale qui contient les règles</p>
                                    </li>
                                </ul>
                            </li>
                        </ul> 
                        <hr/>
                        <h2>Compatibilité ...</h2>

                        <ul>
                            <li>Chrome (v 18)
                                <p>
                                    Le meilleur rendu que nous obtenons est avec le navigateur Chrome (v 18). Nous avons développé dessus, c'est donc notre navigateur de référence.<br/></p>
                            </li>
                            <li>Opera (v 11.62)
                                <p>Opera (v 11.62) a un bon rendu mais le border radius n'est pas toujours pris en compte.</p>
                            </li>
                            <li>Firefox (v 11)
                                <p>Firefox (v 11) est etrangement long à charger mais obtient un bon rendu (sauf sur les petites images)</p>
                            </li>
                            <li>IE (v 9)
                                <p>IE (v 9) a un bon rendu mais certaines (et rares) améliorations de CSS3 et HTML5 ne sont pas pris en compte.</p>
                            </li>
                            <li>IE (v 7)
                                <p>Finalement si l'utilisateur navigue avec IE (v 7) ou inférieure il se verra notifier que c'est un newbie.</p>
                            </li>
                        </ul>

                        <p>La compatibilité ne peut être maximale du fait que tous les navigateurs ne gère pas les nouveaux standarts de la même façon.</p>

                        <hr/>
                        <h2>Notre marque de fabrique</h2>
                        <p>Nous avons essayer d'avoir un design très graphique et un peu recherché en essayant de toucher le plus de nouvelles connaissances possible.</p>
                        <p>De plus nous avons utilisé un SVN pour mettre en commun notre travail de binôme : <code>https://code.google.com/p/shifumiweb/</code>.</p>
                        <p>D'un commun accord, les sources de ce projet son sous licence GPL GNU // Creative commons comme l'indique le logo <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a></p>

                    </div> 

                    <div class="clear"></div>  

                </article>

            </div> 

            <aside id="sidebar" role="complementary">

                <aside class="widget">
                    <h3>Origines</h3>
                    <blockquote><p>
                	Tout comme le jeu de go et le mahjong, pierre-feuille-ciseaux fut inventé en Chine. Selon un livre nommé Wǔzázǔ (五雜俎 ou 五雜組) écrit par Xiè Zhàozhì (謝肇淛) vers la fin de la période Ming, les seigneurs de la dynastie Han jouaient à un jeu appelé shǒushìlìng (手勢令) qui est considéré comme étant pierre-feuille-ciseaux.
                        </p></blockquote>
                    <p><cite><a href="http://fr.wikipedia.org/wiki/Pierre-feuille-ciseaux">Wikipedia</a></cite>, Pierre-feuille-ciseaux</p>

                </aside>

            </aside> 

        </div> 

        <footer id="footer">
            <p>
                <a href="#">Shifumi.com</a> <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
                <span class="sep">|</span>
                <a href="credits.html" title="Crédits du site">Crédits</a>
            </p>
        </footer> 

        <div class="clear"></div>

    </div> 

</body>
</html>